<template>
  <div>
    <van-index-bar :index-list="indexList">
      <!-- 品牌-->
      <div v-for="(item,index) in topBrandList" :key="index">
        <van-index-anchor :index="item.key">{{item.key}}</van-index-anchor>
        <van-cell v-for="(itemCell,idx) in item.name_list" :key="idx" @click="getChildListByParentId(itemCell)">
          <template slot="title" class="cell_img">
            <img class="icon" :src="'http:'+itemCell.ImageUrl" alt="">
            <span class="custom-text">{{itemCell.name}}</span>
          </template>
        </van-cell>
      </div>

      <van-popup v-model="carTypeShow" position="right">
        <div class="secondList">
          <van-cell>
            <template slot="title" class="cell_img">
              <img class="icon" :src="'http:'+selectBrand.ImageUrl" alt="">
              <span class="custom-text">{{selectBrand.name}}</span>
            </template>
          </van-cell>
          <div v-for="(item,index) in carTypeData" :key="index">
            <van-index-anchor class="title">{{item.Name}}</van-index-anchor>
            <van-cell :title="itemCell.Name" v-for="(itemCell,idx) in item.Vehicle_Series" :key="idx" @click="YearInfoListBySeriesID(itemCell)" />
          </div>
        </div>
      </van-popup>
      <van-popup v-model="vehicleTypeShow" position="right">
        <div class="secondList">
          <van-cell>
            <template slot="title" class="cell_img">
              <img class="icon" :src="'http:'+selectBrand.ImageUrl" alt="">
              <span class="custom-text">{{selectCarType.BrandName+'-'+selectCarType.Name}}</span>
            </template>
          </van-cell>
          <div v-for="(item,index) in vehicleTypeData" :key="index">
            <div class="title crumbs">
              <span>{{item.year}}</span>
              <van-icon name="play" size='8px' />
              <div class="hine">选择车型</div>
            </div>
            <van-cell v-for="(itemCell,idx) in item.infolist" :key="idx" @click.stop="goBack(itemCell)">
              <template slot="title">
                <span class="cell_text">{{itemCell.DisplacementText}}</span>
                <span class="cell_text">{{itemCell.GearboxName}}</span>
                <span class="cell_text">{{itemCell.VehicleName}}</span>
                <span class="cell_text">{{itemCell.DriveName}}</span>
              </template>
            </van-cell>
            <!-- <van-cell :title="itemCell.VehicleName" v-for="(itemCell,idx) in item.infolist" :key="idx" @click="goBack(itemCell)"/> -->
          </div>
        </div>
      </van-popup>

    </van-index-bar>
  </div>
</template>
<script>
import { screenClassA,screenClassB } from "@/assets/js/select_car.js";
export default {
  data() {
    return {
      clientHeight: "",
      topBrandList: [],
      carTypeData: [],
      vehicleTypeData: [],
      indexList: [],
      carTypeShow: false,
      vehicleTypeShow: false,
      selectBrand: {},
      selectCarType: {}
    };
  },
  created() {
    this.TopBrandList();
  },
  methods: {
    TopBrandList() {
      let params = {
        code: "",
        AppKey: "536babcc-dd54-42fb-b43e-31c80b7afa74"
      };
      this.$toast.loading({
        message: "加载中...",
        duration: 0
      });

      this.$api.dataCenterGet("/vehicle/Brand/TopBrandList", params, res => {
        this.$toast.clear();
        if (res.Success && res.Data.length) {
          let carCode = []; //导航
          let carName = []; //列表
          // let DataList = screenClassA(res.Data);
          let DataList = res.Data;
          for (var i = 0; i < DataList.length; i++) {
            if (carCode.indexOf(DataList[i].Code) == -1) {
              carCode.push(DataList[i].Code);
            }
          }
          carCode.sort();
          carCode.forEach((item, index) => {
            carName[index] = {
              key: item,
              name_list: []
            };
          });
          DataList.forEach(item => {
            let firstName = item.Code;
            let index = carCode.indexOf(firstName);
            carName[index].name_list.push({
              name: item.Name,
              key: firstName,
              id: item.Id,
              ImageUrl: item.ImageUrl
            });
          });

          this.indexList = carCode;
          this.topBrandList = carName;
          console.log("carName-==>", carName, "carCode==>", carCode);
        }
      });
    },
    getChildListByParentId(e) {
      this.selectBrand = e;
      this.carTypeShow = true;
      let params = {
        parentId: e.id,
        AppKey: "536babcc-dd54-42fb-b43e-31c80b7afa74"
      };
      this.$toast.loading({
        message: "加载中...",
        duration: 0
      });

      this.$api.dataCenterGet(
        "/vehicle/Brand/GetChildListByParentId",
        params,
        res => {
          this.$toast.clear();
          if (res.Success && res.Data.length) {
            let DataList = res.Data;
            // let DataList = screenClassB(res.Data, e.name);
            this.carTypeData = DataList;
          }
        }
      );
    },
    YearInfoListBySeriesID(e) {
      this.selectCarType = e;
      this.vehicleTypeShow = true;
      let params = {
        seriesId: e.Id,
        AppKey: "536babcc-dd54-42fb-b43e-31c80b7afa74"
      };
      this.$toast.loading({
        message: "加载中...",
        duration: 0
      });

      this.$api.dataCenterGet(
        "/vehicle/Info/YearInfoListBySeriesID",
        params,
        res => {
          this.$toast.clear();
          if (res.Success && res.Data.length) {
            this.vehicleTypeData = res.Data;
          }
        }
      );
    },
    goBack(e) {
      console.log(e);
      this.$store.commit(
        "onChoosecarInfo",
        e.BrandName +
          "-" +
          e.SeriesName +
          "-" +
          e.VehicleName +
          "-" +
          e.Year +
          "款"
      );
      this.$router.replace({ name: "write_message" });
    }
  }
};
</script>
<style lang="less" scoped>
.van-cell__title {
  height: 0.8rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  .icon {
    width: 0.933333rem;
    height: 0.933333rem;
    margin-right: 0.346667rem;
    background: #efefef;
  }
  .cell_text {
    display: inline-block;
    padding: 0 1px;
  }
}
.secondList {
  width: 9rem;
  min-height: 18rem;
  background: #fff;
  .title {
    background: #ededed;
  }
}
.crumbs {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0.4rem;
  height: 0.933333rem;
  span {
    font-size: 0.32rem;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(42, 103, 255, 1);
    padding-right: 0.133333rem;
  }
  .hine {
    font-size: 0.32rem;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(102, 102, 102, 1);
    padding-left: 0.13333rem;
  }
}
</style>

